<template>
  <el-card shadow="never">
    <template slot="header">
      <span>目标地区</span>
    </template>
    <div>
      <el-cascader
        v-model="cascaderValue"
        :options="options"
        :props="{ multiple: true }"
        filterable
        clearable
        :size="size"
        class="!w-70 mr-1"
      ></el-cascader>
      <el-button type="success" plain :size="size" @click="add">添加</el-button>
    </div>

    <el-table
      :size="size"
      :data="tableData"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
      <el-table-column>
        <template slot="header">
          <!-- <el-button type="info" plain :size="size" @click="clearAll"
            >清空</el-button
          > -->
          <div class="flex flex-row-reverse">
            <el-button
              type="danger"
              plain
              :size="size"
              :disabled="selection.length === 0"
              @click="removeSelected"
              >删除选中</el-button
            >
          </div>
        </template>
        <template slot-scope="scope">
          <div class="flex flex-row-reverse">
            <el-button
              type="danger"
              plain
              :size="size"
              @click="remove(scope.row)"
              >删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
<script>
// import areas from './areas.json?json'
import nations from './nations.json?json'

export default {
  name: 'Geo',
  props: {
    size: {
      type: String,
      default: 'small',
    },
    value: {
      type: Array,
      default: () => [],
    },
  },
  data: () => {
    return {
      // options: areas.map((a) => ({
      //   value: a.name,
      //   label: a.name,
      //   children: a.city.map((c) => ({
      //     value: c.name,
      //     label: c.name,
      //     children: c.area.map((ar) => ({
      //       value: ar,
      //       label: ar,
      //     })),
      //   })),
      // })),
      options: nations,

      cascaderValue: [],
      tableData: [],
      selection: [],
    }
  },
  watch: {
    tableData: {
      deep: true,
      handler(val) {
        this.$emit(
          'input',
          val.map((el) => el.address)
        )
      },
    },
  },
  methods: {
    handleSelectionChange(value) {
      this.selection = value
    },
    add() {
      if (!this.cascaderValue) {
        this.$message.warning('需要选择地区')
        return
      }

      for (const val of this.cascaderValue) {
        this.tableData.push({
          address: val.join(''),
        })
      }
    },
    /**
     * 清除
     */
    clearAll() {
      this.tableData = []
    },
    remove(row) {
      this.tableData = this.tableData.filter((el) => el.address !== row.address)
    },
    removeSelected() {
      if (this.selection.length === 0) {
        this.$message.warning('请先勾选数据')
        return
      }
      this.tableData = this.tableData.filter(
        (el) => this.selection.indexOf(el) === -1
      )
    },
  },
}
</script>
